<!-- 订单管理 -->
<template>
    <div class="information">
        <el-card>
            <div class="search">
                <el-input placeholder="请输入订单编号查询" v-model="keyword"></el-input>
                <el-button type="primary" @click="search">订单查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
            <!-- 表格 -->
            <div class="table">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;" max-height="460px">
                    <el-table-column label="序号" type="index" width="100px" align="center">
                    </el-table-column>
                    <el-table-column prop="username" label="下单用户" width="120px" show-overflow-tooltip />
                    <el-table-column prop="orderDetails" label="订单详情">
                        <template #default="scope">
                            <el-button link size="small" type="primary" @click="handleDetail(scope.row)">查看订单</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orderCode" label="订单编号" width="180px" />
                    <el-table-column prop="name" label="收货人" width="120px" />
                    <el-table-column prop="phone" label="收货人电话" width="180px" />
                    <el-table-column prop="address" label="收货地址" width="200px" show-overflow-tooltip />
                    <el-table-column prop="orderStatus" label="订单状态" width="100px">
                        <template #default="scope">
                            <!-- 订单状态，0-待付款，1-待发货，2-已发货，3-已取消 -->
                            <span v-if="scope.row.orderStatus == 0">待发货</span>
                            <span v-else-if="scope.row.orderStatus == 1">已发货</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100px">
                        <template #default="scope">
                            <el-popconfirm title="您确定发货吗?" @confirm="handleChangeOrderStatus(scope.row)" icon="Promotion"
                                width="150px" v-if="scope.row.orderStatus == 0">
                                <template #reference>
                                    <el-button size="small" type="primary">发 货</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <!-- 分页器 -->
                <Pagination :paginationData="paginationData" @getInfo="getOrdersInfo"></Pagination>
            </div>
        </el-card>
    </div>
    <!-- 查看 订单详情 对话框 -->
    <DetailDialog></DetailDialog>
</template>

<script setup lang="ts">
import Pagination from '../../components/pagination/index.vue'
import DetailDialog from './detail_dialog/index.vue'
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
// 引入全局事件总线
import $bus from '../../bus/index'
import { reqOperateOrdersInfo, reqGetOrdersInfo } from '../../api/info/orders/index'
import type { AllOrders, OrdersData, Orders } from '../../api/info/orders/type'

// 表格数据
let tableData = ref<AllOrders>([])
// 存储接口返回的分页器数据
let paginationData = ref({})
let keyword = ref<String>('')
onMounted(() => {
    getOrdersInfo()
})
//获取全部 订单 信息
const getOrdersInfo = async (currentpage = 1, pagesize = 10, orderCode = '') => {
    let data: OrdersData = {
        pageSize: pagesize,
        currentPage: currentpage,
        orderCode: orderCode
    }

    let result: any = await reqGetOrdersInfo(data)
    if (result.code == 20000) {
        tableData.value = result.data.list
        paginationData.value = result.data
    }
}
// 重置 
const reset = () => {
    getOrdersInfo()
}
// 查询
const search = () => {
    getOrdersInfo(paginationData.value?.currentPage, paginationData.value?.pageSize, (keyword.value as string))
}


// 查看 订单 内容按钮回调
const handleDetail = (row: Orders) => {
    $bus.emit('show', {
        isShow: true,
        row
    })

}

// 气泡确认框 确认按钮回调 发货
const handleChangeOrderStatus = async (row: Orders) => {
    let result: any = await reqOperateOrdersInfo((row.id as number), 1)
    if (result.code == 20000) {
        // 重新获取 订单 信息
        getOrdersInfo(paginationData.value?.currentPage)
        ElMessage({
            type: 'success',
            message: '发货成功'
        })
    } else {
        ElMessage({
            type: 'error',
            message: '发货失败'
        })
    }

}
</script>

<style lang="scss" scoped>
.search {
    margin: 10px 0 30px 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .el-input {
        width: 25%;
        margin-right: 10px;
    }
}

.el-form {
    padding: 20px 30px;
}

.table {
    margin: 10px 0;

    .el-table {
        font-size: 13px !important;
    }
}

.pagination {
    margin-top: 20px;
}
</style>